Q. 리엑트에서 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?

🧑🏻‍💻 Answer.

---

✅ 일반적 차이

• 클래스형 컴포넌트
  → state, lifeCycle 관련 기능사용이 가능합니다.

• 함수형 컴포넌트
  → state, lifeCycle 관련 기능사용이 불가능합니다, 대신 Hook을 통해 해결합니다.

✅ this

• 클래스형 컴포넌트
  → this 키워드를 사용하여 상태나 메서드를 참조합니다.

• 함수형 컴포넌트
  → this 키워드를 사용하지 않습니다.

✅ State 값 사용 시 차이점

• 클래스형 컴포넌트
  → constructor 안에서 this.state 초깃값 설정이 가능합니다.
  → constructor 없이 바로 state 초깃값을 설정할 수 있습니다.

• 함수형 컴포넌트
  → 함수형 컴포넌트에서는 useState 함수로 state를 사용합니다.

✅ props의 사용 차이

• 클래스형 컴포넌트
  → this.props로 값을 불러올 수 있습니다.

• 함수형 컴포넌트
  → props를 불러올 필요 없이 바로 호출할 수 있습니다.

✅ LifeCycle

• 클래스형 컴포넌트
  → componentDidMount: 컴포넌트가 처음 렌더링 된 후에 실행되며 초기화 작업에 사용됩니다.
  → componentDidUpdate: 컴포넌트 업데이트 후에 실행되며 데이터 업데이트 및 UI 갱신에 사용됩니다.
  → componentWillUnmount: 컴포넌트가 언마운트되기 직전에 실행되며 정리 작업에 사용됩니다.

• 함수형 컴포넌트
  → useEffect 훅을 사용하여 라이프사이클과 관련된 작업을 수행합니다.
  → 비동기적으로 동작하며, 종속성 배열에 지정된 props나 state 변경 시 작업을 다시 실행됩니다.
  → 반환된 함수로 컴포넌트 언마운트 시 정리 작업 수행 가능합니다.